<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>170</title>
  <style>
     #table tbody tr:hover{
      background-color: #99CCFF !important;
    }
    #table tbody tr:nth-child(2n+1){
      background-color: rgb(234, 234, 234);
    }
    #table tbody tr:nth-child(2n){
      background-color: rgb(223, 223, 223);
    }
    .first{
      color:#666;
      display:inline-block;
      vertical-align:top;
      border:1px solid #e6e6e6;
      padding:5px 9px;
      font-size:12px;
    }
    #number{
      display:inline-block;
      vertical-align:top;
    }
    .num{
      color:#666;
      display:inline-block;
      vertical-align:top;
      border:1px solid #e6e6e6;
      padding:5px 9px;
      font-size:12px;
      margin-right:6px;
    }
    .current{
      color:#3e89fa;
      font-size:12px;
      display:inline-block;
      vertical-align:top;
      margin-left:30px;
      padding:5px 9px;
    }
    #inp{
      height:32px;
      width:32px;
    }
    .jump{
      display:inline-block;
      vertical-align:top;
      font-size:12px;
    }
    .l_jump{
      display:inline-block;
      vertical-align:top;
      padding:5px 9px;
      border:1px solid #e6e6e6;
    }
  </style>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    var a = {
      code: 1,
      list: [
        {
          createTime: '1',
          level: '\u9152\u6c34\u996e\u6599',
          type:
            '\u6e05\u51c9\u53ef\u53e3\u7684\u9152\u6c34\u996e\u6599',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343628.jpg',
        },
        {
          createTime: '2',
          level: '\u7c73\u9762\u7cae\u6cb9',
          type: '\u5bb6\u5ead\u5fc5\u5907',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343865.jpg',
        },
        {
          createTime: '3',
          level: '\u7f8e\u5bb9\u6d17\u62a4',
          type: '\u62a4\u80a4\u5fc5\u5907',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343935.jpg',
        },
        {
          createTime: '4',
          level: '\u6e05\u6d01\u6d17\u6da4',
          type:
            '\u7ed9\u60a8\u4e00\u4e2a\u5e72\u51c0\u7684\u751f\u6d3b\u73af\u5883',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389343986.jpg',
        },
        {
          createTime: '5',
          level: '\u751f\u6d3b\u7528\u54c1',
          type: '\u5bb6\u5ead\u5fc5\u5907',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389344445.jpg',
        },
        {
          createTime: '6',
          level: '\u4f11\u95f2\u98df\u54c1',
          type: '\u597d\u5403\u7f8e\u5473',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389344494.jpg',
        },
        {
          createTime: '07',
          level: '\u4f11\u95f2\u98df\u54c1',
          type: '\u597d\u5403\u7f8e\u5473',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389344494.jpg',
        },
        {
          createTime: '08',
          level: '\u4f11\u95f2\u98df\u54c1',
          type: '\u597d\u5403\u7f8e\u5473',
          msg:
            'http:\/\/www.songcuomen.com\/attachments\/productType\/2014-01\/10\/21_1389344494.jpg',
        },
        {
          createTime: '09',
            "level": 'Info',
            "type": 'FPGA',
            "msg": '@Set_PccPID OK:pntPid =0X1002'
        },
        {
          createTime: '10',
            "level": 'Info',
            "type": 'FPGA',
            "msg": '@Set_PccPID OK:pntPid =0X1002'
        },
        {
          createTime: '11',
            "level": 'Info',
            "type": 'FPGA',
            "msg": '@Set_PccPID OK:pntPid =0X1002'
        },
        {
          createTime: '12',
            "level": 'Info',
            "type": 'FPGA',
            "msg": '@Set_PccPID OK:pntPid =0X1002'
        },
        {
          createTime: '13',
            "level": 'Info',
            "type": 'FPGA',
            "msg": '@Set_PccPID OK:pntPid =0X1002'
        },
        {
          createTime: '14',
            "level": 'Info',
            "type": 'FPGA',
            "msg": '@Set_PccPID OK:pntPid =0X1002'
        },
      ]
    };
    // var arrTotal = a['list'];

    var str = "2021-12-09 00:00:12&2&1&系统开机启动\n2021-12-09 00:00:12&2&系统&设置系统语言: 中文\n2021-12-09 00:00:12&2&系统&网口:0, IP: 192.168.1.1, NetMask: 255.255.255.0, GW: 192.168.1.254\n2021-12-09 00:00:15&0&8&节目列表为空\n2021-12-09 00:00:12&2&系统&网口:0, IP: 192.168.1.1, NetMask: 255.255.255.0, GW: 192.168.1.254"
    
    var arrTotal = [];
    str.split("\n").map(item=>{
      var items = item.split("&");
      // for(var i = 0;i<items.length;i++){
      //   if(items[i] == null || items[i] == ''|| items[i] == undefined){
      //     items[i] = '无'
      //   }
      // }
        arrTotal.push({
          "createTime":items[0],
          "level":items[1],
          "type":items[2],
          "msg":items[3],
        })
    })
    console.log(arrTotal)
    
    var y = 1; //表示页数
    var t = 2; //表示每页现实几条数据
    var z = arrTotal.length;
    var zy = Math.ceil(z / t);
    function fanye(f) {
      
      if (y == 1 && f == -1) {
        alert('这是第一页')
        f = 0;
      }
      if (y == zy && f == 1) {
        alert('这是最后一页')
        f = 0;
      }

      var otbod = document.getElementById('table').tBodies[0]
      var s = otbod.rows.length
      for (i = 0; i < s; i++) {
        otbod.removeChild(otbod.rows[0])
      }
      var q = (y - 1) * 2 //页数-1 乘以每页现实多少条 结果为 本页从第几条开始
      y += f
      for (var i = 0; i < t; i++) {
        var otr = document.createElement('tr')
        var otd1 = document.createElement('td')
        var otd2 = document.createElement('td')
        var otd3 = document.createElement('td')
        var otd4 = document.createElement('td')
        otd1.innerHTML = arrTotal[q]['createTime']
        otd2.innerHTML = arrTotal[q]['level']
        otd3.innerHTML = arrTotal[q]['type']
        otd4.innerHTML = arrTotal[q]['msg']
        otr.appendChild(otd1)
        otr.appendChild(otd2)
        otr.appendChild(otd3)
        otr.appendChild(otd4)
        otbod.appendChild(otr)
        if (q == zy) {
          break
        }
        q++
      }
    }
  </script>
</head>
<body>
  <table width="95%" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td height="35" align="left" valign="middle">
          <table width="980" border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td width="20" height="20">&nbsp;</td>
                <!-- <td><img src="../images/1.gif" alt="" width="18" height="16"><span class="STYLE9"><span class="STYLE10">日志</span></span></td> -->
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    
    <tr>
      <td height="51" align="center" valign="middle">
        <table width="980" border="0" cellpadding="1" cellspacing="1">
          <tbody>
            <tr>
              <td height="34">
                <fieldset align="center">
                  <legend> 
                    <font class="STYLE6" color="#000000">日志记录 </font>
                  </legend>
                  <form name="f1" action="/SetCABISS" method="post" onsubmit="return checkBISS();"> 
                    <table id="table" border="0" cellpadding="1" cellspacing="1">
                      <thead>
                        <tr align="middle" valign="center" bgcolor="#D7D7D7">
                          <td>createTime</td>
                          <td>level</td>
                          <td>type</td>
                          <td>msg</td>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>
                    
                    <div>
                      <div class="first" id="home">首页</div>
                      <!-- <a href="javascript:currentPage(-1);" class="first" id="before">上一页</a> -->
                      <div class="first" id="before">上一页</div>
                      <div id="number">
                        
                      </div>
                        <!-- <a href="javascript:currentPage(1);" class="first" id="next">下一页</a> -->
                        <div class="first" id="next">下一页</div>
                      <div class="first" id="last">尾页</div>
                      
                      <div class="first">
                        总共 <span id="taTalDataNumber"></span> 条记录 
                      </div>
                      <div class="current"></div>
                      <div class="jump">
                        <input type="text" id="inp"></input>
                        <div class="l_jump">跳转</div>
                      </div>
                    </div>
                  </form>
                </fieldset>
              </td>
            </tr>
          </tbody>
        </table>         
      </td>
    </tr>
  </tbody>
  </table>
   
	<script type="text/javascript">
		var sign=1;//记录当前第几个块，比如我规定最多显示10个块，那么sign的取值范围就是1-10
		var b_sign=1;//记录sign变动之前的sign数值
		var count=zy;//记录总共页数
		// var real_count=count<=10?count:10;//定义最多有多少块
		var real_count=count;//定义最多有多少块

		var real_change=0;
		var o=0;
		if(real_count%2==0)
		{
			real_change=real_count/2;
		}
		else 
		{
			real_change=real_count/2+0.5;
			var o=1;
		}
		//初始化块
		let i=1;
		while(i<=real_count)
		{
			var val="<div class='num' pageNum='"+i+"' id="+i+">"+i+"</div>";
			$("#number").append(val)
			i++;
		}
		
		function query_all(){//查找id='number'块的所有子节点
			nodes=$("#number").find("div");
			length=nodes.length;
		}
		query_all();
		
		function currentPage(f){//获取当前page
			let use="#"+sign;
			$(".current").text("当前"+$(use).text()+"/"+count+"页");
			$("#taTalDataNumber").text(z);

      
      if (y == 1 && f == -1) {
        alert('这是第一页')
        f = 0;
      }
      if (y == zy && f == 1) {
        alert('这是最后一页')
        f = 0;
      }

      var otbod = document.getElementById('table').tBodies[0]
        var s = otbod.rows.length
        for (i = 0; i < s; i++) {
          otbod.removeChild(otbod.rows[0])
        }
        y = sign;
        if(f){
          y += f;
        }
        var q = (y - 1) * t //页数-1 乘以每页现实多少条 结果为 本页从第几条开始
        // 在最后一页时对余数循环
        for (var i = 0; i < t; i++) {
          var otr = document.createElement('tr')
          var otd1 = document.createElement('td')
          var otd2 = document.createElement('td')
          var otd3 = document.createElement('td')
          var otd4 = document.createElement('td')
          otd1.innerHTML = arrTotal[q]['createTime']
          otd2.innerHTML = arrTotal[q]['level']
          otd3.innerHTML = arrTotal[q]['type']
          otd4.innerHTML = arrTotal[q]['msg']
          otr.appendChild(otd1)
          otr.appendChild(otd2)
          otr.appendChild(otd3)
          otr.appendChild(otd4)
          otbod.appendChild(otr)
          if (q == zy) {
            break
          }
          q++
        }

		}		
		currentPage(0);
		var b_change=function(){//将当前第sign块样式还原
			b_sign=sign;
			let use="#"+b_sign;
			$(use).css({"border":"1px solid #e6e6e6","color":"#666"});
		}
		var blue_change=function(c){//将当前sign块样式改变，好区别于其他块
			let use="#"+c;
			$(use).css({"border":"none","color":"#3e89fa"});

		}
		blue_change(sign);//页面第一次加载的时候，改变指定块样式
 
		function go_back(now_sign,kit){//当前sign块先还原样式,再改变sign,再改变改变后的sign块样式
			b_change();
			if(kit==0)
			{
				sign=now_sign;
			}
			else if(kit==1)
			{
				if(sign!=real_count)
				sign++;
			}
			else if(kit==2)
			{
				if(sign!=1)
				sign--;
			}
			blue_change(sign);
		}
		function change_add(c_add,kit){//遍历改变id='number'的子节点内容
			let p=c_add;
			for(let j=0;j<length;j++)
			{
				if(kit==0){
					nodes[j].innerHTML=p;
					p++;
				}else if(kit==1){
					nodes[j].innerHTML=p;
					p--;
				}else if(kit==2){
					nodes[j].innerHTML=parseInt(nodes[j].innerHTML)+1;
				}else if(kit==3){
					nodes[j].innerHTML=parseInt(nodes[j].innerHTML)-1;
				}			
			}
		}
		
		function for_num(use,id){
      // debugger
			let error_1="#"+real_change;
			//页面在最前或最后
			if($(error_1).text()==real_change||$(error_1).text()==count-real_change+1)
			{
				//判断点击的第一个一半的前面还是点击的第二个一半的后面
				if($(use).text()<=real_change||$(use).text()>count-real_change)
				{
					go_back(id,0);
				}
				else
				{
					go_back(real_change,0);
					change_add($(use).text()-(real_change-1),0);
				}
				currentPage();
			}
			else
			{
				var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
				if($(use).text()<=real_change||inner)
				{
					if($(use).text()<=real_change)
					{
						go_back($(use).text(),0);
						change_add(1,0);
					}
					else
					{
						go_back(real_count-(count-$(use).text()),0);
						change_add(count-real_count+1,0);
					}
				}
				else
				{
					go_back(real_change,0);
					change_add($(use).text()-(real_change-1),0);
				}	
			}
			currentPage();
		}
		//遍历每个子div块，并为他们增加点击事件
		for(let j=0;j<length;j++)
		{
			let id=nodes[j].getAttribute("id");
			let use="#"+id;
			$(use).bind("click",function(){
				for_num(use,id);
			});
		}
		$("#home").bind("click",function(){
			go_back(1,0);
			change_add(1,0);
			currentPage();
		});
		$("#last").bind("click",function(){
			go_back(real_count,0);
			change_add(count-real_count+1,0);
			currentPage();
		});
		$("#before").bind("click",function(){
			let use="#"+sign;
			var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change+1;
			if($(use).text()<=real_change||inner)
			{
				go_back(0,2);
				currentPage();
			}
			else
			{
				change_add(0,3);
				currentPage();
			}
		});
		$("#next").bind("click",function(){
			let use="#"+sign;
			
			if($(use).text()!=count)
			{
				var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
				if($(use).text()<real_change||inner)
				{
					go_back(0,1);
					currentPage();
				}
				else
				{
					change_add(0,2);
					currentPage();
				}
			}
		});
		$(".l_jump").bind("click",function(){
			let val=$("#inp").val();//获取输入框的值
			val=parseInt(val);
			if(val>=1&&val<=count)
			{
				var inner=(o==0)?val>=count-real_change:val>count-real_change;
				if(val<=real_change||inner)//如果是在最前面的一半以前，或者是在最后面的一半以后
				{
					if(val<=real_change)
					{
						go_back(val,0);
						change_add(1,0);
					}
					else
					{
						go_back(real_count-(count-val),0);
						change_add(count-real_count+1,0);
					}
				}
				else
				{
					go_back(real_change,0);
					change_add(val-(real_change-1),0);
				}
			}
			else
			{
				alert("没有这么多页");
			}
			currentPage();
		});
	</script>
</body>
</html>